/**
 * webpack打包配置
 */
const path = require("path") // node内置path模块处理路径
const glob = require("glob") // node内置glob模块 解析路径

/* 插件 */
const HtmlWebpackPlugin = require("html-webpack-plugin") // 打包html插件
const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin // 清除dist目录插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin") // 提取css插件
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css插件

/* 自动加载所有页面JS作为入口 */
const entry = {};
const scripts = glob.sync("./src/pages/*/*.js")
scripts.forEach(function(dir) {
    let chunkName = path.basename(dir, '.js')
    entry[chunkName] = dir
})

/* 自动打包页面 */
const htmls = glob.sync("./src/pages/*/*.html")
const pages = htmls.map(function(html) {
    let name = path.basename(html)
    return new HtmlWebpackPlugin({
        template: html,
        filename: name,
        chunks: [name.replace('.html', ''), 'resetCss']
    })
})

/* 打包配置 */
module.exports = {
    // 入口
    entry: entry,

    // 出口
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name].js",
        publicPath: "./",
    },

    // 加载器
    module: {
        // 加载器处理规则
        rules: [
            // 打包css
            {
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../",
                        },
                    },
                    "css-loader",
                ],
            },

            // 打包less
            {
                test: /\.less$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../",
                        },
                    },
                    "css-loader",
                    "less-loader",
                ],
            },

            // 打包css背景图
            {
                test: /\.(png|jpg|gif|jpeg|webp|mp4)$/,
                loader: "url-loader",
                options: {
                    limit: 10 * 1024, // 限制大小 10kb
                    name: "[hash:16].[ext]", // 控制名字长度
                    esModule: false, // 关闭es6模块化
                    outputPath: "imgs", // 输出目录
                },
            },

            // 打包html中的图片
            {
                test: /\.html$/,
                loader: "html-loader",
            },

            // 打包字体图标
            {
                test: /\.(woff|ttf|woff2|svg|eot)$/,
                loader: "file-loader",
                options: {
                    name: "[hash:16].[ext]",
                    outputPath: "fonts",
                },
            },
        ],
    },

    // 模式
    mode: process.env.NODE_ENV,

    // 插件
    plugins: [
        // 删除dist
        new CleanWebpackPlugin(),
        // 提取css插件
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
        }),
        // 压缩css插件
        new OptimizeCssAssetsWebpackPlugin(),
    ].concat(pages),

    // 开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, "dist"), // 启动服务器目录
        compress: true, // 启动gzip
        port: 8666, // 端口
        open: true, // 自动打开服务
        publicPath: "/", // 静态资源查找路径
        openPage: "advertisement.html", // 打开的页面
    },
    target: "web", // 目标是浏览器
}